/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Tabs, Table, Spin, Modal } from 'antd';
import styles from './style/index.less';
import CurveChart from './common/curveChart/view'
const { TabPane } = Tabs;

@connect(({ onlineMonitor }) => ({
  sc: onlineMonitor.sc,
  ecgsbf: onlineMonitor.ecgsbf,
  lljcd: onlineMonitor.lljcd,
  szjcd: onlineMonitor.szjcd,
  yljcd: onlineMonitor.yljcd,
  loading: onlineMonitor.loading,
}))
class OnlineMonitor extends Component {

  state = {
    key: 'sc',
    state: { visible: false },
    record: {}, // 当前点击的具体行信息
  }

  // Tabs配置
  tabsConfig = [
    {
      tab: '水厂',
      key: 'sc',
      columns: [
        { title: 'ID', dataIndex: 'INDEX', key: 'INDEX', align: 'center', width: 70 },
        { title: '名称', dataIndex: 'Name', key: 'Name', align: 'center' },
        { title: '监测时间', dataIndex: 'Time', key: 'Time', align: 'center', width: 220 },
        { title: '今日供水量(m³)', dataIndex: 'JRGSL', key: 'JRGSL', align: 'center' },
        { title: '瞬时流量(m³/h)', dataIndex: 'SSLL', key: 'SSLL', align: 'center' },
        { title: '压力(Mpa)', dataIndex: 'YALI', key: 'YALI', align: 'center' },
        { title: '余氯(mg/l)', dataIndex: 'YL', key: 'YL', align: 'center' },
        { title: '浊度(NTU)', dataIndex: 'ZD', key: 'ZD', align: 'center' },
        { title: '盐酸液位(m)', dataIndex: 'YSYW', key: 'YSYW', align: 'center' },
        { title: '氯酸钠液位(m)', dataIndex: 'LSNYW', key: 'LSNYW', align: 'center' },
        {
          title: '曲线监测', dataIndex: 'QXJC', key: 'QXJC', align: 'center', width: 120,
          render: (text, record) => <a href="!#" onClick={(e) => { this.curveMonitoring(e, record) }}>曲线图</a>
        },
      ]
    },
    {
      tab: '二次供水泵房',
      key: 'ecgsbf',
      columns: [
        { title: 'ID', dataIndex: 'INDEX', key: 'INDEX', align: 'center', width: 70 },
        { title: '名称', dataIndex: 'Name', key: 'Name', align: 'center' },
        { title: '监测时间', dataIndex: 'Time', key: 'Time', align: 'center', width: 220 },
        { title: '进水压力(Mpa)', dataIndex: 'JSYL', key: 'JSYL', align: 'center' },
        { title: '出水压力(Mpa)', dataIndex: 'CSYL', key: 'YL', align: 'center' },
        { title: '设定压力(Mpa)', dataIndex: 'SDYL', key: 'SDYL', align: 'center' },
        { title: '泵状态', dataIndex: 'BZT', key: 'BZT', align: 'center' },
        {
          title: '曲线监测', dataIndex: 'QXJC', key: 'QXJC', align: 'center', width: 120,
          render: (text, record) => <a href="!#" onClick={(e) => { this.curveMonitoring(e, record) }}>曲线图</a>
        },
      ]
    },
    {
      tab: '流量监测点',
      key: 'lljcd',
      columns: [
        { title: 'ID', dataIndex: 'INDEX', key: 'INDEX', align: 'center' },
        { title: '名称', dataIndex: 'Name', key: 'Name', align: 'center' },
        { title: '监测时间', dataIndex: 'Time', key: 'Time', align: 'center', width: 220 },
        { title: '瞬时流量(m³/h)', dataIndex: 'SSLL', key: 'SSLL', align: 'center' },
        { title: '今天累计流量(m³)', dataIndex: 'JTLJLL', key: 'JTLJLL', align: 'center' },
        {
          title: '曲线监测', dataIndex: 'QXJC', key: 'QXJC', align: 'center',
          render: (text, record) => <a href="!#" onClick={(e) => { this.curveMonitoring(e, record) }}>曲线图</a>
        },
      ]
    },
    {
      tab: '水质监测点',
      key: 'szjcd',
      columns: [
        { title: 'ID', dataIndex: 'INDEX', key: 'INDEX', align: 'center', width: 70 },
        { title: '名称', dataIndex: 'Name', key: 'Name', align: 'center' },
        { title: '监测时间', dataIndex: 'Time', key: 'Time', align: 'center', width: 220 },
        { title: '温度(℃)', dataIndex: 'WD', key: 'WD', align: 'center' },
        { title: 'PH', dataIndex: 'PH', key: 'PH', align: 'center' },
        { title: '溶氧', dataIndex: 'RY', key: 'RY', align: 'center' },
        { title: '电导', dataIndex: 'DD', key: 'DD', align: 'center' },
        { title: '浊度(NTU)', dataIndex: 'ZD', key: 'ZD', align: 'center' },
        { title: '余氯(mg/l)', dataIndex: 'YL', key: 'YL', align: 'center' },
        {
          title: '曲线监测', dataIndex: 'QXJC', key: 'QXJC', align: 'center', width: 120,
          render: (text, record) => <a href="!#" onClick={(e) => { this.curveMonitoring(e, record) }}>曲线图</a>
        },
      ]
    },
    {
      tab: '压力监测点',
      key: 'yljcd',
      columns: [
        { title: 'ID', dataIndex: 'INDEX', key: 'INDEX', align: 'center' },
        { title: '名称', dataIndex: 'Name', key: 'Name', align: 'center' },
        { title: '监测时间', dataIndex: 'Time', key: 'Time', align: 'center', width: 220 },
        { title: '压力(Mpa)', dataIndex: 'YALI', key: 'YALI', align: 'center' },
        {
          title: '曲线监测', dataIndex: 'QXJC', key: 'QXJC', align: 'center', width: 120,
          render: (text, record) => <a href="!#" onClick={(e) => { this.curveMonitoring(e, record) }}>曲线图</a>
        },
      ]
    }
  ]


  componentDidMount() {
    this.initAllData();
  }

  // 获取页面数据
  initAllData = () => {
    this.props.dispatch({
      type: 'onlineMonitor/fetchData',
      payload: {}
    });
  }

  // 获取Tabs和Table
  getTabs = () => {
    const { key } = this.state;
    // 如果不触发key就将初始值赋为水厂 触发tab按钮 切换数据
    // const dataSource = key !== '' ? this.props[key] : data;
    const dataSource = this.props[key];
    // 数据假分页 /* 序号写死 */
    if (key === 'ecgsbf') {
      dataSource.forEach((x, i) => {
        x.INDEX = i + 1;
        x.key = i;
        x.BZT = x.BZT === true ? '开' : '关'
      });
    } else {
      dataSource.forEach((x, i) => { x.INDEX = i + 1; x.key = i; });
    }
    return (
      <Tabs defaultActiveKey="sc" onChange={this.tabChange} type="card">
        {this.tabsConfig.map(item => {
          return (
            <TabPane tab={item.tab} key={item.key}>
              <Table columns={item.columns} size="small" dataSource={dataSource} bordered pagination={{ pageSize: 10 }} scroll={{ y: 240 }} />
            </TabPane>
          )
        })}
      </Tabs>
    )
  }

  // 点击曲线图
  curveMonitoring = (e, record) => {
    e.preventDefault();
    this.setState({ visible: true, record })
  }

  // 曲线详情弹出框
  curveMonitorDialog = () => {
    const { record, key } = this.state;
    const tab = this.tabsConfig.filter(x => x.key === key)[0];
    const params = {
      value: key
    }
    return (
      <Modal
        width={800}
        title={`${tab['tab']} - ${record.Name} - 曲线监测`}
        visible={this.state.visible}
        onCancel={this.handleCancel}
        footer={null}
        destroyOnClose={true}
      >
        <CurveChart {...params} />
      </Modal>
    )
  }

  // 关闭模态框
  handleCancel = e => {
    this.setState({ visible: false });
  };

  // Tab栏切换
  tabChange = key => {
    this.setState({ key })
  }

  render() {
    return (
      <div className={styles.container}>
        {/* 地图 */}
        <Row className={styles.onlineMap}>
          <div className={styles.onlineMap_main}>
            {/* <OnlineMonitorMap tab={this.state.key} /> */}
          </div>
        </Row>
        {/* 表格 */}
        <Row className={styles.onlineTab}>
          <Spin spinning={!this.props.loading}>
            {this.getTabs()}
          </Spin>
        </Row>
        {/* 曲线监测 */}
        <Row className={styles.onlineDialog}>
          {this.curveMonitorDialog()}
        </Row>
      </div>
    );
  }
}

export default OnlineMonitor;
